<template>
    <div class="sjie">
      <ul class="nav">
          <li>大学</li>
          <li>其他</li>
          
      </ul>
      <div class="center" >
          <div class="xibao" v-for="(item,index) in daxu" :key="index">
            <button>{{item.dy}}</button>
            <button>{{item.de}}</button>
            <button>{{item.ds}}</button>
            <button>{{item.di}}</button>
            <button>{{item.yj}}</button>
           
          </div>
         
        
      </div>
       
    </div>
</template>

<script>
import axios from "axios";
export default {
    name:"Sjie",
  data() {
    return {
        daxu:[]
    };
  },
   created(){

      axios({
          url:"http://localhost:3000/daxu",
          method:"get",

      })
      .then(res=>{
          this.daxu = res.data;
      })
    }
};
</script>


<style>
.sjie{
    width: 100%;
    height: 100%;
    display: flex;
}
.sjie li:hover{
    background-color: #a3a3a3;
}
.nav{
    padding-top: .2rem;
    width: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: aqua; */
}
.nav li{
    width: 100%;
    height: .5rem;
    /* background-color: orange; */
    text-align: center;
    line-height: .5rem;
    font-size: .22rem;
    font-weight: 600;
}
.center{
    flex: 1;
    height: 2rem;
    /* background-color: aqua; */
    margin-top: .7rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.center button{
    border: none;
    width: 1rem;
    height: .5rem;
}
</style>